<template>
  <div class="el-form-item el-form-item--small asterisk-left el-form-item--label-right">
    <el-form-item :prop="prop" :label="label" style="margin-right: 0;">
      <template #label>
        {{ label }} <span v-if="label2"> &nbsp;/ {{ label2 }}</span>
      </template>
      <div style="width: 80px">
        <slot name="input1"></slot>
      </div>
      <span class="divideSpan"> / </span>
    </el-form-item>
    <el-form-item :prop="prop2" :label="label2" label-width="0" id="extraFormItem">
      <div style="width: 80px">
        <slot name="input2"></slot>
      </div>
    </el-form-item>
  </div>
</template>

<script lang="ts" setup>
/* 双输入框, 用法:
<MkInputTwo label="性别" label2="年龄" prop="xingBie" prop2="nianLing">
  <template #input1>
    <MkSelectNoLabel v-model="ctx.xingBie" :isEdit="ctx.IsEdit" style="width: 100%" :options="['男', '女']" selectId="KuaiSuFaXue_XingBie" />
  </template>
  <template #input2>
    <el-input v-model="ctx.nianLing" :disabled="!ctx.IsEdit" style="width: 100%" />
  </template>
</MkInputTwo>
*/
defineOptions({
  name: 'MkInputTwo'
})

const props = defineProps({
  prop: {
    type: String,
    require: true
  },
  prop2: {
    type: String,
    require: true
  },
  label: {
    type: String,
  },
  label2: {
    type: String,
  },
})

</script>
<style lang="scss" scoped>
.mk-input-two-container {
  display: inline-flex;
  /* 横向排列 */
  align-items: center;
  /* 垂直居中对齐 */
  gap: 11px;
  flex-wrap: nowrap;
  /* 与分隔符宽度一致，避免手动计算 margin */
}

#extraFormItem {
  // display: none;
  margin: 0 !important;
  margin-bottom: 0 !important;

  :deep(.el-form-item__label) {
    display: none;
  }
}

.divideSpan {
  width: 11px;
  text-align: center;
  height: var(--el-component-size-small);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>